<template>
    <view class="page-wrap">
        <scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
            <view class="list-item" v-for="(item, index) in list" :key="index">
                <view class="deduction">
                    <view class="amount"><text class="unit">￥</text>{{item.deductionAmount}}</view>
                </view>
                <view class="info">
                    <view class="title">{{item.title}}</view>
                    <view class="end-time" v-if="item.endTime">{{item.endTime}}前有效</view>
                    <view class="end-time" v-else>无时间限制</view>
                </view>
                <view class="status">
                    <text v-if="item.used" class="used">已使用</text>
                    <text v-else-if="item.endTime && item.endTime < now" class="over">已过期</text>
                    <text v-else class="usable">未使用</text>
                </view>
            </view>
        </scroll-list>
        <global-components ref="global-components" :loading="false"></global-components>
    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    export default {
        data() {
            return {
                list: [],
                now: '',
            };
        },
        methods: {
            // 加载数据
            load(paging) {
                this.$api.coupon.takeRecordPage({
                    ...paging,
                }).then(res => {
                    console.log('orders', res)
                    this.list = this.list.concat(res.list);
                    this.now = res.now;
                    // 加载成功
                    this.$refs.list.loadSuccess({
                        list: this.list,
                        total: res.total
                    });
                })
            },
            // 刷新刷剧
            refresh(paging) {
                this.$api.coupon.takeRecordPage({
                    ...paging,
                }).then(res => {
                    console.log('orders', res)
                    this.list = res.list;
                    this.now = res.now;
                    // 加载成功
                    this.$refs.list.refreshSuccess({
                        list: this.list,
                        total: res.total
                    });
                })
            },
        },
        watch: {},
        onLoad(option) {},
        onShow() {},
        onHide() {},
        onUnload() {},
        onReachBottom() {},
        onPageScroll(event) {},
        onPullDownRefresh() {},
        onShareAppMessage(options) {}
    };
</script>

<style scoped lang="scss">
    .page-wrap {
        background: #fff;
        padding: 0 32rpx;

        .list-item {
            display: flex;
            align-items: center;
            padding: 32rpx 0;
            border-bottom: 1rpx solid #cdcdcd;

            .deduction {
                width: 180rpx;
                color: #f44336;
                text-align: center;
                font-size: 44rpx;

                .unit {
                    font-size: 0.7em;
                }
            }

            .info {
                flex-grow: 1;
                font-size: 32rpx;

                .end-time {
                    color: #ccc;
                    font-size: 0.8em;
                }
            }

            .status {
                font-size: 32rpx;

                .used {
                    color: $success-color;
                }

                .over {
                    color: $warning-color;
                }

                .usable {
                    color: $primary-color;
                }
            }
        }
    }
</style>